Vue2中的关于$event,v

2024-07-09 00:50| 来源: 网络整理| 查看: 265

$event是啥当我们直接绑定在一个标签上的时候，$event就是原生事件当我们监听一个事件的时候，$event就是$emit的第二个参数点击原文在这里插入图片描述

先说明下，以下下代码不可以直接复制，因为为了看得直观一点，删除了一些不必要的标签

v-model语法糖

官方指路在这里插入图片描述所以说v-model就是语法糖，语法糖又是啥？就是一些本来复杂的语法给你简化了。在一个input中的v-model

这样的写法：

等价于↓↓↓↓的写法:

自定义的双向绑定是以下写法：

#父组件------------------------------------------------------------------------------- data () { return { selectedId:'1' } } ---------------------------------------------------------------------------------------- #子组件------------------------------------------------------------------------------- 北京上海广州深圳 export default { props:['selectedId'], } ----------------------------------------------------------------------------------------

又等价↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

子组件：$emit事件使用input事件，然后props使用value接收父组件数据

父组件: 使用v-model语法糖来进行缩写，缩写了啥呢？请看下面的官方描述：

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

原文指路在这里插入图片描述所以下面又可以这样子写

#父组件------------------------------------------------------------------------------- data () { return { selectedId:'1' } } ---------------------------------------------------------------------------------------- #子组件------------------------------------------------------------------------------- 北京上海广州深圳 export default { props:['value'], } ----------------------------------------------------------------------------------------

在一个input中的v-model

这样的写法：

等价于下面的写法:

在一个自定义组件中

组件的双向绑定是以下写法：

子组件：$emit事件使用input事件，然后props使用value接收父组件数据,

父组件: 使用v-model语法糖来进行缩写，缩写了啥呢？请看下面的官方描述：

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

原文指路在这里插入图片描述所以下面又可以这样子写

#父组件------------------------------------------------------------------------------- data () { return { selectedId:'1' } } ---------------------------------------------------------------------------------------- #子组件------------------------------------------------------------------------------- 北京上海广州深圳 export default { props:['value'], } ---------------------------------------------------------------------------------------- model模式

上面其实有提到过，默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event

其实我们的v-model默认绑定的prop和event也是可以修改的呢。

我们通过一个model属性来修改v-model默认绑定的属性:

子组件↓：

#子组件北京上海广州深圳 export default { model: { prop: 'selectedId', event: 'handleChange' }, props:['selectedId'], }

父组件↓：

#父组件

export default { data () { return { selectedId:'1' } }

这里好像说当默认的值有其他用途的时候，我们可以这么来该，因为我没遇到这个使用场景，所以我就不在过多赘述了，详细看官方教程点击官方API指路官方教程在这里插入图片描述

.sync

这个的用法呢

在有些情况下，我们可能需要对一个 prop 进行“双向绑定

官方指路在这里插入图片描述父组件↓↓↓↓

#父组件 export default { data () { return { val:'1' } }, }

子组件↓↓↓↓

#子组件北京上海广州深圳 export default { props:['selectedId'], }

这样子就可以对一个单一的prop进行一个双向绑定啦当然我们的.sync也是可以对对象进行绑定的，这里不就不赘述了，请看官网官方指路在这里插入图片描述其实学vue2最好的教程就是官方文档！ VUE2教程

【本文地址】

公司简介

联系我们